import React = require("react");
import { ItemDialog } from "controls/item-dialog";
import { PageProps } from "maishu-chitu-react";
import { dataSources } from "services/dataSources";
import { createGridView, BoundField, CommandField } from "controls/wz-ext";

// export default function (page: Page) {

//     let shopping = page.createService(ShoppingService);
//     let activity = page.createService(ActivityService);


//     ReactDOM.render(<BrandListPage />, page.element);
// }

export default class BrandListPage extends React.Component<PageProps, {}>{
    private tableElement: HTMLTableElement;
    private brandDialog: BrandDialog;

    constructor(props) {
        super(props)

        // this.shopping = dataSources.brand;
    }

    showDialog(item?: Brand) {
        item = item || {} as Brand;
        let title = item ? "编辑品牌" : "添加品牌";
        this.brandDialog.show(item, title, (item) => {
            item.Id ? dataSources.brand.update(item) : dataSources.brand.insert(item);
        })
    }

    tableRef(e: HTMLTableElement) {
        if (!e || this.tableElement)
            return;

        this.tableElement = e;
        let gridView = createGridView({
            element: this.tableElement, dataSource: dataSources.brand, columns: [
                new BoundField<Brand>({
                    dataField: 'Name', sortExpression: 'Name', headerText: '名称',
                    itemStyle: { width: '200px' } as CSSStyleDeclaration,
                    headerStyle: { textAlign: 'center' } as CSSStyleDeclaration
                }),
                new BoundField<Brand>({
                    dataField: 'Image', headerText: '图片',
                    headerStyle: { textAlign: 'center' } as CSSStyleDeclaration
                }),
                new CommandField<Brand>({
                    headerText: '操作',
                    headerStyle: { textAlign: 'center', width: '100px' } as CSSStyleDeclaration,
                    itemStyle: { textAlign: 'center' } as CSSStyleDeclaration,
                    // itemEditor: this.itemEditor
                })
            ]
        });
    }

    render() {
        return <>
            <div className="tabbable">
                <ul className="nav nav-tabs">
                    <li className="pull-right">
                        <button className="btn btn-sm btn-primary" onClick={() => this.showDialog()} >
                            <i className="icon-plus" />
                            <span>添加</span>
                        </button>
                    </li>
                </ul>
            </div>
            <table className="table table-striped table-bordered table-hover"
                ref={this.tableRef.bind(this)}>

            </table>
            <BrandDialog ref={e => this.brandDialog = e || this.brandDialog} />
        </>
    }
}


class BrandDialog extends ItemDialog<{}, Brand> {
    render() {
        return <>
            <div className="form-group clearfix">
                <label className="col-sm-2">名称</label>
                <div className="col-sm-10">
                    <input name="Name" type="text" className="form-control" />
                </div>
            </div>
            <div className="form-group clearfix">
                <label className="col-sm-2">图片</label>
                <div className="col-sm-10">
                    <input name="Image" type="text" className="form-control" />
                </div>
            </div>
        </>
    }
}
